<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>React App</title>
  <link rel="stylesheet" href="./index.css">
  <script src="../lib/vue.js"></script>
</head>
<body>
<div id="root">
  <div class="todo-container">
    <div class="todo-wrap">
      <todo-header :task-list.sync="taskList" ></todo-header>
      <todo-main :task-list="taskList" :is-finished="isFinished" :delete-list="deleteList"></todo-main>
      <todo-footer :task-list="taskList" :delete-all="deleteAll" :finish-all="finishAll"></todo-footer>
    </div>
  </div>
</div>
</body>
<script type="module">
  Vue.prototype.$bus = new Vue();
  import TodoHeader from "../components/TodoHeader.js";
  import TodoMain from "../components/TodoMain.js";
  import TodoFooter from "../components/TodoFooter.js";
  new Vue({
    el:'#root',
    data:{
      taskList:[
        {
          id:Math.random().toString(36).slice(2),
          title:"金庸",
          isChecked:true
        },{
          id:Math.random().toString(36).slice(2),
          title:"古龙",
          isChecked:false
        }
      ]
    },
    methods:{
      isFinished(e,id){
        this.taskList = this.taskList.map((item) => {
          if (item.id === id) {
            item.isChecked = e.target.checked;
          }
          return item;
        });
      },
      //单个删除
      deleteList(id){
        const isConfirmed = confirm("确定要删除这个任务吗??");
        if (isConfirmed) {
          this.taskList = this.taskList.filter(item=>{
            return item.id !== id;
          })
        }
      },
      //全部删除
      deleteAll(){
        this.taskList = this.taskList.filter(item=>{
          return item.isChecked === false;
        })
      },
      finishAll(e){
        this.taskList = this.taskList.map((item) => {
          item.isChecked = e.target.checked;
          return item;
        });
      }
    },
    components:{
      TodoHeader,
      TodoMain,
      TodoFooter
    }
  })
</script>
</html>
